<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现一款响应式的时间轴效果</title>
</head>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  .design-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #1f1f1f;
    min-height: 100vh;
    padding: 100px 0;
    font-family: Jost;
  }

  /* .design {
    display: flex;
    align-items: center;
    justify-content: center;
  } */
  .timeline {
    width: 80%;
    height: auto;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
  }

  .timeline-content {
    padding: 20px;
    background: #1f1f1f;
    -webkit-box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
    box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #242424;
    border-radius: 5px;
    color: white;
    padding: 1.75rem;
    transition: 0.4s ease;
    overflow-wrap: break-word !important;
    margin: 1rem;
    margin-bottom: 20px;
    border-radius: 6px;
  }

  .timeline-component {
    margin: 0px 20px 20px 20px;
  }

  @media screen and (min-width: 768px) {
    .timeline {
      display: grid;
      /* 样式均分 */
      grid-template-columns: 1fr 3px 1fr;
    }

    /* 分割线样式 */
    .timeline-middle {
      position: relative;
      background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
      width: 3px;
      height: 100%;
    }

    /* .main-middle {
      opacity: 0;
    } */
    .timeline-circle {
      position: absolute;
      top: 0;
      left: 50%;
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background-image: linear-gradient(45deg, #F27121, #E94057, #8A2387);
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
  }
</style>

<body>
  <!-- <section class="design-section">
    <div class="timeline">
      <div class="timeline-empty">
      </div>
      <div class="timeline-middle">
        <div class="timeline-circle"></div>
      </div>
      <div class="timeline-component timeline-content">
        <h3>HTML</h3>
        <span>14种CSS实现水平或垂直居中的技巧</span>
      </div>
    </div>
  </section> -->
  <section class="design-section">
    <div class="timeline">
      <div class="timeline-empty">
      </div>
      <div class="timeline-middle">
        <div class="timeline-circle"></div>
      </div>
      <div class="timeline-component timeline-content">
        <h3>HTML</h3>
        <p>14种CSS实现水平或垂直居中的技巧</p>
      </div>
      <!-- 这次是文字在左边 -->
      <div class="timeline-component timeline-content">
        <h3>CSS</h3>
        <p>14种CSS实现水平或垂直居中的技巧</p>
      </div>
      <div class="timeline-middle">
        <div class="timeline-circle"></div>
      </div>
      <div class="timeline-empty">
      </div>

      <div class="timeline-empty">
      </div>

      <div class="timeline-middle">
        <div class="timeline-circle"></div>
      </div>
      <div class=" timeline-component timeline-content">
        <h3>Javascript</h3>
        <p>7个在 JavaScript 中编写函数的基础知识</p>
      </div>

    </div>
    </div>
  </section>
</body>

</html>